<template>
  <!-- zq 2023年3月13日 10点06分 -->
  <!-- 竞品阶段 -->
  <div id="SysStage">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="float: left; margin-right: 20px;">竞拍阶段</span>
        <!-- <span style="float: left;color: #FF9933;">状态：竞拍待开始</span> -->
      </div>
      <el-card class="box-card1" shadow="never">
        <el-row>
          <el-col :span="3">
            <el-image
              class="image"
              :src="'http://101.43.223.224:8765/image/getImageById?id='+competitorInfo.img_id.split(',')[0]"
              >
            </el-image>
          </el-col>
          <el-col :span="21">
            <el-descriptions>
              <el-descriptions-item label="拍卖品">{{competitorInfo.goods_name}}</el-descriptions-item>
              <el-descriptions-item label="拍卖人">{{competitorInfo.user_name}}</el-descriptions-item>
              <el-descriptions-item label="拍卖编号">{{competitorInfo.goods_number}}</el-descriptions-item>
              <el-descriptions-item label="起拍价">￥{{competitorInfo.start_price}}</el-descriptions-item>
              <el-descriptions-item label="保证金">￥{{competitorInfo.earnest_money}}</el-descriptions-item>
              <el-descriptions-item label="加价幅度">￥{{competitorInfo.start_price/100}}</el-descriptions-item>
              <el-descriptions-item label="报名人数">{{enrollNum}}人</el-descriptions-item>
              <el-descriptions-item label="未缴保证金">{{unpaidNum}}人</el-descriptions-item>
              <el-descriptions-item label="缴纳保证金">{{payNum}}人</el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card1" shadow="never">
        <template>
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              prop="create_time"
              label="报名时间"
              width="250">
              <template slot-scope="scope">
                <P>{{format(scope.row.create_time)}}</P>
              </template>
            </el-table-column>
            <el-table-column
              prop="earnest_money_code"
              label="报名编号"
              width="150">
            </el-table-column>
            <el-table-column
              prop="user_name"
              label="联系人"
              width="150">
            </el-table-column>
            <el-table-column
              prop="user_phone"
              label="联系方式">
            </el-table-column>
            <el-table-column
              prop="start_price"
              label="保证金"
              width="150">
              <template slot-scope="scope">
                <P>{{scope.row.start_price/5}}</P>
              </template>
            </el-table-column>
            <el-table-column
              prop="earnest_money_status"
              label="保证金状态"
              width="150">
              <template slot-scope="scope">
                <P>{{scope.row.earnest_money_status === 0?'未缴纳保证金':'已缴纳保证金'}}</P>
              </template>
            </el-table-column>
            <el-table-column
              prop="transaction_status"
              label="报名状态"
              width="150">
              <template slot-scope="scope">
                <P>{{scope.row.transaction_status === 0?'报名未成功':'报名成功'}}</P>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            style="text-align: center;"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
      </el-card>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 竞品信息
      competitorInfo: {},
      // 报名人数
      enrollNum: '',
      // 未缴纳人数
      unpaidNum: '',
      // 缴纳人数
      payNum: '',
      // 总条数
      total: 0,
      pageRequest: { // 分页请求参数
        pageSize: 5,
        pageNum: 1
      },
      // 表格数据
      tableData: []
    }
  },
  mounted () {
    this.getCompetitorInfo()
  },
  methods: {
    format (data) {
      // shijianchuo是整数，否则要parseInt转换
      const time = new Date(data)
      const y = time.getFullYear()
      const m = time.getMonth() + 1
      const d = time.getDate()
      const h = time.getHours()
      const mm = time.getMinutes()
      const s = time.getSeconds()
      return (y + '-' + m + '-' + d + ' ' + h + ':' + mm + ':' + s)
    },
    // 查询全部报名人信息
    getBondInfo () {
      this.$axios.get('/stage/getBondInfo', {
        params: {
          goodsId: this.competitorInfo.id,
          pageSize: this.pageRequest.pageSize,
          pageNum: this.pageRequest.pageNum
        }
      }).then(res => {
        if (res.data.flag) {
          this.tableData = res.data.obj.content
          this.total = res.data.obj.total
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 查询缴纳保证金人数
    getPayNum () {
      this.$axios.get('/stage/getPayNum', {
        params: {
          goodsId: this.competitorInfo.id
        }
      }).then(res => {
        if (res.data.flag) {
          this.payNum = res.data.obj.count
        } else {
          this.myMessage('error', res.data.obj)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 查询未缴纳保证金人数
    getUnpaidNum () {
      this.$axios.get('/stage/getUnpaidNum', {
        params: {
          goodsId: this.competitorInfo.id
        }
      }).then(res => {
        if (res.data.flag) {
          this.unpaidNum = res.data.obj.count
        } else {
          this.myMessage('error', res.data.obj)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 查询报名人数
    getEnrollNum () {
      this.$axios.get('/stage/getEnrollNum', {
        params: {
          goodsId: this.competitorInfo.id
        }
      }).then(res => {
        if (res.data.flag) {
          this.enrollNum = res.data.obj.count
        } else {
          this.myMessage('error', res.data.obj)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 查询竞品信息
    getCompetitorInfo () {
      this.$axios.get('/stage/getCompetitorInfo', {
        params: {
          id: this.$route.params.id
        }
      }).then(res => {
        if (res.data.flag) {
          this.competitorInfo = res.data.obj
          this.getEnrollNum()
          this.getUnpaidNum()
          this.getPayNum()
          this.getBondInfo()
        } else {
          this.myMessage('error', res.data.obj)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    handleSizeChange (val) { // 改变每页条数
      this.pageRequest.pageSize = val
      this.getBondInfo()
    },
    handleCurrentChange (val) { // 改变当前页
      this.pageRequest.pageNum = val
      this.getBondInfo()
    },
    // 封装弹窗
    myMessage (type, message) {
      this.$message({
        message: message,
        type: type
      })
    }
  }
}
</script>

<style scoped>
  .image{
    width: 90px;
    height: 120px;
    background: #d3dce6;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .text {
    font-size: 14px;
  }
  .item {
    padding: 18px 0;
  }
  .box-card {
    width: 90%;
    margin: 0 auto;
  }
  .box-card1 {
    width: 100%;
    margin: 0 auto;
  }
</style>
